<template>
  <div>
    <el-table
      v-loading="loading"
      element-loading-text="数据加载中"
      stripe
      :data="list"
      border>
      <el-table-column
        inline-template
        label="序号"
        width="80"
        align="center">
        <span>{{$index + 1}}</span>
      </el-table-column>
      <el-table-column
        property="code"
        label="编码"
        width="130"
        align="left">
      </el-table-column>
      <el-table-column
        inline-template
        label="名称"
        align="left">
        <template>
        <span :class="'lvl_'+row.lvl">
          <span></span>
          <i v-bind:class="['fa',row.icon]"></i>{{row.name}}
        </span>
        </template>
      </el-table-column>
      <el-table-column
        inline-template
        label="类型"
        width="180"
        align="left">
        <template>
        <span>
          {{lvlList[row.lvl]}}
        </span>
        </template>
      </el-table-column>
      <el-table-column
        property="url"
        label="URL"
        width="180"
        align="left">
      </el-table-column>
      <el-table-column
        inline-template
        label="状态"
        align="left"
        width="100">
        <span :class="{'red':row.active==0,'green':row.active==1}">
          {{active[row.active]}}
        </span>
      </el-table-column>
      <el-table-column
        label="操作"
        inline-template
        align="right" v-if="$utils.ckUIPower('S01010201')"
        width="230">
        <template>
          <el-button type="text" v-if="row.lvl<3" @click.native.prevent="openSonDialog(row)">添加子菜单</el-button>
          <el-button type="text" v-if="row.lvl==3" @click.native.prevent="openSonDialog(row)">添加元素</el-button>
          <i class="aui-iconfont aui-icon-edit green pointer" @click="openEditDialog(row.id)"></i>
          <el-popover
                      ref="popover_"
                      placement="top">
            <p><i class="el-alert__icon el-icon-warning red"></i>确定要删除此菜单吗？<br>删除后将无法恢复！</p>
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini" @click.native.prevent="deletemenu(row.id);">确定
              </el-button>
            </div>
          </el-popover>
          <i class="el-icon-delete red pointer" v-popover:popover_></i>
        </template>
      </el-table-column>
    </el-table>
    <!--弹出框-->
    <menu-add-dialog v-bind:dialog-form-visible="dialogData.show" v-bind:parent="parent"
                     v-on:closeDialog="closeDialog"></menu-add-dialog>
  </div>
</template>
<script>
  import menuAddDialog from './add.dialog.vue'
  import http from '../../../api/http'
  export default {
    data () {
      return {
        loading: true,
        parent: {},//父级菜单
        form: {
          filter: {kwd: '', sort: {sort_num: 'asc'}},
          pageNo: 1,
          pageSize: 10
        }, active: ["禁用", "启用"],
        id: null,
        dialogData: {show: false},
        list: [],
        lvlList: ['', '产品/服务', '', '菜单', '元素'],
        dialogFormVisible: false
      }
    },
    computed: {},
    methods: {
      onSubmit () {
        var vm = this;
        vm.loading = true;
        http.postData(vm, "/sys/menu/list", {}, function (resp) {
          var ret = resp.body;
          if (ret.code == '111') {
            vm.list = ret.value;
          }
          vm.loading = false;
        });
      },
      openEditDialog(id_) {
        this.$set(this.dialogData, 'show', true);
        if (id_ != undefined && typeof id_ == "string") {
          this.id = id_;
        } else {
          this.id = '';
        }
        this.parent = {};
      },
      openSonDialog(row){
        this.$set(this.dialogData, 'show', true);
        this.id = undefined;
        this.parent = row;
      },
      loadData(func) {
        var vm = this;
        if (vm.id != undefined && vm.id != '') {
          http.postData(vm, "/sys/menu/detail/" + vm.id, {}, function (resp) {
            var ret = resp.body;
            if (ret.code === '111') {
              func(ret.value);
            } else {
              vm.$notify.error({title: '操作失败', message: ret.msg});
            }
          });
        } else {
          func({active: 1, name: '', icon: '', parentId: vm.parent.id, lvl: vm.parent.lvl + 1});
        }
      },
      closeDialog() {
        this.$set(this.dialogData, 'show', false);
      },
      deletemenu (id) {
        var vm = this;
//        this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
//          type: 'warning'
//        }).then(() => {
        http.postData(vm, "/sys/menu/del/" + id, {}, function (resp) {
          var ret = resp.body;
          if (ret.code === '111') {
            vm.$notify({title: '删除提示', message: ret.msg, type: 'success'});
            vm.onSubmit();
          } else {
            vm.$message({type: 'error', message: ret.msg});
          }
        });
//        })
      },
      handleSizeChange () {
        this.form.pageNo = 1
        this.onSubmit()
      },
      handleCurrentChange (val) {
        this.form.pageNo = val
        this.onSubmit()
      }
    },
    components: {
      menuAddDialog
    },
    created() {
      this.onSubmit();
    }
  }

</script>
<style>
</style>
